<template>
	<view>
		<view style="margin: 15rpx 20rpx 0 20rpx;" v-if="vk.vuex.get('$app.appinfo.opensearch')">
			<u-search placeholder="输入剧名搜索" v-model="keyword" @search="search" @custom="search"></u-search>
		</view>

		<view style="margin: 32rpx;">
			<u-swiper height="375rpx" indicator indicatorMode="dot" :list="swiperList" keyName="image"
				@click="clickSwiper"></u-swiper>
		</view>

		<!-- 首页导航栏图标自定义组件navbar -->
		<navbar :iconList="iconList"></navbar>

		<!-- ，开关开启时，新人首充优惠充值弹窗图片提醒 -->
		<view v-if="xrsc.xrscState">
			<aui-poster ref="poster" :mask="auiPoster.mask" :maskTapClose="auiPoster.maskTapClose"
				:image="auiPoster.pic" @callback="auiPosterCallback"></aui-poster>
		</view>

		<!-- 营销活动弹窗图片提醒 -->
		<aui-poster ref="poster2" :mask="index_activity.mask" :maskTapClose="index_activity.maskTapClose"
			:image="index_activity.pic" @callback="index_activity_Callback"></aui-poster>

		<!-- 推荐和换一换板块 -->
		<view class="recommend_box">
			<view class="recommend_top">
				<view class="classtwo">好友力荐</view>
				<view style="color: #999999;font-size: 26rpx;">大家都爱看</view>
			</view>
			<view class="classsix">
				<view class="recommend_item" v-for="(item,index) in haoyoulijian" :key="index"
					@click="toVideoDetail(item)">
					<image :src="item.tv_image" style="width: 200rpx;border-radius: 10rpx;height: 320rpx;"></image>
					<view class="tv_name">{{item.tv_name}}</view>
					<view class="update_num" v-if="!item.is_end">更新至第{{item.update_witch}}集</view>
					<view class="update_num" v-else>已完结共{{item.all_series}}集</view>
				</view>
			</view>
			<view class="recommend_but" @click="huanyihuan(1)">
				<image src="@/pages_sub/static/hyh.png"
					style="width: 30rpx;height: 30rpx;"></image>
				<view class="classthree">换一换</view>
			</view>
		</view>
		<!-- 最新热剧板块 -->
		<view>
			<view class="classone">
				<view class="classtwo">🔥「最新热剧」</view>
			</view>
			<view class="classfive">
				<view class="recommend_item" style="width: 220rpx;" v-for="(item,index) in zuixinreju" :key="index"
					@click="toVideoDetail(item)">
					<image :src="item.tv_image" class="classfour"></image>
					<view class="tv_name">{{item.tv_name}}</view>
					<view class="update_num" v-if="!item.is_end">更新至第{{item.update_witch}}集</view>
					<view class="update_num" v-else>已完结共{{item.all_series}}集</view>
				</view>
			</view>
		</view>
		<!-- 热播新剧榜左右滑 -->
		<scroll-view class="scroll_box" scroll-x>
			<view class="scroll_item">
				<view class="classtwo">热播榜</view>
				<view v-for="(item,index) in rebobang" :key="index"
					style="display: flex;align-items: center;margin: 20rpx 0;" @click="toVideoDetail(item)">
					<image class="scroll_img" :src="item.tv_image"></image>
					<view style="margin-left: 16rpx;">
						<view style="display: flex;align-items: center;">
							<!-- <image src="../static/sec.png" mode=""></image> -->
							<image class="scroll_sort_img"
								:src="index==0?'../static/first.png':index==1?'../static/sec.png':'../static/third.png'">
							</image>
							<view class="scroll_tv_name">{{item.tv_name}}</view>
						</view>
						<view style="color: #888888;font-size: 26rpx;margin: 16rpx 0;">热播榜</view>
						<view style="font-size: 22rpx;" v-if="!item.is_end">更新至第{{item.update_witch}}集</view>
						<view style="font-size: 22rpx;" v-else>已完结共{{item.all_series}}集</view>
					</view>
				</view>
			</view>

			<view class="scroll_item" style="background-color: #f5f6f9;margin-right: 20rpx;">
				<view class="classtwo">新剧榜</view>
				<view v-for="(item,index) in xinjubang" :key="index"
					style="display: flex;align-items: center;margin: 20rpx 0;" @click="toVideoDetail(item)">
					<image class="scroll_img" :src="item.tv_image"></image>
					<view style="margin-left: 16rpx;">
						<view style="display: flex;align-items: center;">
							<image class="scroll_sort_img"
								:src="index==0?'../static/first.png':index==1?'../static/sec.png':'../static/third.png'">
							</image>
							<view class="scroll_tv_name">{{item.tv_name}}</view>
						</view>
						<view style="color: #888888;font-size: 26rpx;margin: 16rpx 0;">新剧榜</view>
						<view style="font-size: 22rpx;" v-if="!item.is_end">更新至第{{item.update_witch}}集</view>
						<view style="font-size: 22rpx;" v-else>已完结共{{item.all_series}}集</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view v-if="page>1">
			<!-- 独家好剧板块 -->
			<view>
				<view class="classone" @click="getMoreTv('独家好剧')">
					<view class="classtwo">🔥「独家好剧」</view>
					<view style="color: #999999;font-size: 26rpx;margin-right: 35rpx;">更多>></view>
				</view>
				<view class="classfive">
					<view class="recommend_item" style="width: 220rpx;" v-for="(item,index) in dujiahaoju" :key="index"
						@click="toVideoDetail(item)">
						<image :src="item.tv_image" class="classfour"></image>
						<view class="tv_name">{{item.tv_name}}</view>
						<view class="update_num" v-if="!item.is_end">更新至第{{item.update_witch}}集</view>
						<view class="update_num" v-else>已完结共{{item.all_series}}集</view>
					</view>
				</view>
			</view>

			<!-- 逆袭剧场板块 -->
			<view>
				<view class="classone" @click="getMoreTv('逆袭剧场')">
					<view class="classtwo">🔥「逆袭剧场」</view>
					<view style="color: #999999;font-size: 26rpx;margin-right: 35rpx;">更多>>\t</view>
				</view>
				<view class="classfive">
					<view class="recommend_item" style="width: 220rpx;" v-for="(item,index) in nixijuchang" :key="index"
						@click="toVideoDetail(item)">
						<image :src="item.tv_image" class="classfour"></image>
						<view class="tv_name">{{item.tv_name}}</view>
						<view class="update_num" v-if="!item.is_end">更新至第{{item.update_witch}}集</view>
						<view class="update_num" v-else>已完结共{{item.all_series}}集</view>
					</view>
				</view>
			</view>

			<!-- //占位 -->
			<!-- 推荐和换一换板块 -->
			<view class="recommend_box">
				<view class="recommend_top">
					<view class="classtwo">独家推荐</view>
					<view style="color: #999999;font-size: 26rpx;">大家都爱看</view>
				</view>
				<view class="classsix">
					<view class="recommend_item" v-for="(item,index) in dujiatuijian" :key="index"
						@click="toVideoDetail(item)">
						<image :src="item.tv_image" style="width: 200rpx;border-radius: 10rpx;height: 320rpx;">
						</image>
						<view class="tv_name">{{item.tv_name}}</view>
						<view class="update_num" v-if="!item.is_end">更新至第{{item.update_witch}}集</view>
						<view class="update_num" v-else>已完结共{{item.all_series}}集</view>
					</view>
				</view>
				<view class="recommend_but" @click="huanyihuan(2)">
					<image src="@/pages_sub/static/hyh.png"
						style="width: 30rpx;height: 30rpx;"></image>
					<view class="classthree">换一换</view>
				</view>
			</view>

			<!-- 热血剧场板块 -->
			<view>
				<view class="classone" @click="getMoreTv('热血剧场')">
					<view class="classtwo">🔥「热血剧场」</view>
					<view style="color: #999999;font-size: 26rpx;margin-right: 35rpx;">更多>>\t</view>
				</view>
				<view class="classfive">
					<view class="recommend_item" style="width: 220rpx;" v-for="(item,index) in rexuejuchang"
						:key="index" @click="toVideoDetail(item)">
						<image :src="item.tv_image" class="classfour"></image>
						<view class="tv_name">{{item.tv_name}}</view>
						<view class="update_num" v-if="!item.is_end">更新至第{{item.update_witch}}集</view>
						<view class="update_num" v-else>已完结共{{item.all_series}}集</view>
					</view>
				</view>
			</view>

			<!-- //占位 -->
			<!-- 推荐和换一换板块 -->
			<view class="recommend_box">
				<view class="recommend_top">
					<view class="classtwo">百万播放</view>
					<view style="color: #999999;font-size: 26rpx;">大家都爱看</view>
				</view>
				<view class="classsix">
					<view class="recommend_item" v-for="(item,index) in baiwanbofang" :key="index"
						@click="toVideoDetail(item)">
						<image :src="item.tv_image" style="width: 200rpx;border-radius: 10rpx;height: 320rpx;">
						</image>
						<view class="tv_name">{{item.tv_name}}</view>
						<view class="update_num" v-if="!item.is_end">更新至第{{item.update_witch}}集</view>
						<view class="update_num" v-else>已完结共{{item.all_series}}集</view>
					</view>
				</view>
				<view class="recommend_but" @click="huanyihuan(3)">
					<image src="@/pages_sub/static/hyh.png"
						style="width: 30rpx;height: 30rpx;"></image>
					<view class="classthree">换一换</view>
				</view>
			</view>

			<!-- 情感剧场板块 -->
			<view>
				<view class="classone" @click="getMoreTv('情感剧场')">
					<view class="classtwo">「情感剧场」</view>
					<view style="color: #999999;font-size: 26rpx;margin-right: 35rpx;">更多>>\t</view>
				</view>
				<view class="classfive">
					<view class="recommend_item" style="width: 220rpx;" v-for="(item,index) in qingganjuchang"
						:key="index" @click="toVideoDetail(item)">
						<image :src="item.tv_image" class="classfour"></image>
						<view class="tv_name">{{item.tv_name}}</view>
						<view class="update_num" v-if="!item.is_end">更新至第{{item.update_witch}}集</view>
						<view class="update_num" v-else>已完结共{{item.all_series}}集</view>
					</view>
				</view>
			</view>
		</view>

		<view style="color: #888888;padding: 50rpx 0;font-size: 24rpx;text-align: center;">~我也是有底线的哦~</view>

		<!-- 显示首页订阅消息悬浮 -->
		<image v-if="showdingyue && index_activity.xjqxk_switch" class="fixed_pic1" @click="dingyue"
			:src="index_activity.xjqxk_pic"></image>

		<!-- 显示首页签到悬浮 -->
		<image v-if="!todaySign && index_activity.signin_switch" class="fixed_pic2" @click="jump('kefu')"
			:src="index_activity.signin_pic">
		</image>

		<!-- 显示完整的继续观看 -->
		<view class="continue-bg1" v-if="!continueShow && last_view.tv_image && index_activity.record_switch">
			<view class="continue-bg2">
				<view class="continue-border" @click="toVideoDetail(last_view)">
					<image class="continue-pic" :src="last_view.tv_image"></image>
					<view class="continue-text">继续观看</view>
				</view>
			</view>
		</view>

		<!-- 显示隐藏的继续观看 -->
		<view class="continue-bg1"
			:style="{position: continueStyle.position,bottom: continueStyle.bottom,left: continueStyle.left,}"
			v-if="continueShow && last_view.tv_image && index_activity.record_switch">
			<view class="continue-bg2">
				<view class="continue-border">
					<image class="continue-pic" :src="last_view.tv_image"></image>
					<view class="continue-text">继续观看</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import aui from '@/components/aui-poster/common/aui/js/aui.js';
	import auiPoster from '@/components/aui-poster/aui-poster.vue';
	import navbar from '@/components/navbar/navbar.vue';
	const db = uniCloud.database();
	const _ = db.command;
	export default {
		components: {
			auiPoster,
			navbar
		},
		data() {
			return {
				keyword: "",
				//以下为旧数据
				had_dingyue: false,
				xrsc: {}, //新人首充配置信息
				auiPoster: {
					mask: true,
					maskTapClose: false,
					pic: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8cc040dd-e730-41c0-a0e4-5eed8a83437c/4286d0e6-8e14-4d41-a627-4c54872e5506.png'
				},
				showdingyue: true,
				todaySign: false,
				showIndexCoupou: false, //是否展示首页弹窗优惠券
				page: 1,
				haoyoulijian: [], //好友力荐
				zuixinreju: [], //最新热剧
				rebobang: [], //热播榜
				xinjubang: [], //新剧榜

				dujiahaoju: [], //独家好剧
				nixijuchang: [], //逆袭剧场
				dujiatuijian: [], //独家推荐
				rexuejuchang: [], //热血剧场
				baiwanbofang: [], //百万播放
				qingganjuchang: [], //情感剧场

				swiperList: [],

				last_view: {
					tv_image: '',
				},
				continueStyle: {
					left: '-120rpx',
				},
				scrollTop: 0,
				lastscrollTop: 0,
				continueShow: false,
				kefuurl: "",
				//首页营销活动
				index_activity: {
					mask: true,
					maskTapClose: false,
					image: ''
				},
				iconList: [],
			}
		}, 
		async onLoad(options) {
			vk.showLoading('数据加载中...');
			this.switch_page(options) //根据参数来判断应该进入哪个页面
			this.loadAppData() //加载APP数据，用户未登录也可以获取
			this.getIndexVideo()

			//设置定时器，监听页面滑动
			setInterval(() => {
				if (this.scrollTop == this.lastscrollTop) {
					this.continueShow = false
				} else {
					this.continueShow = true
				}
				this.lastscrollTop = this.scrollTop
			}, 600)
		},
		async onShow() {
			this.userlogin()
			this.showIndexCoupou = vk.vuex.get('$app.showIndexCoupou') || false;
			let had_youhui = vk.vuex.get('$user.userInfo.had_youhui') || true;
			//首页弹窗开关开启且未享受过充值优惠，弹出首页广告
			if (this.showIndexCoupou && !had_youhui) {
				this.$refs.poster.show();
			}
			console.log("invite:", uni.getStorageSync('invite_code'));
		},

		onPageScroll(e) {
			this.scrollTop = Math.trunc(e.scrollTop)
		},

		async onReachBottom() {
			console.log("触底了")
			if (this.page == 1) {
				vk.callFunction({
					url: 'client/video/pub/index_box',
					title: '请求中...',
					data: {
						appid: vk.vuex.get('$app.appid'),
						page: 2
					},
					success: (data) => {
						//更改page值，显示更多内容
						this.page = 2
						this.dujiatuijian = data.dujiatuijian; //独家推荐
						this.baiwanbofang = data.baiwanbofang; //百万播放
						this.dujiahaoju = data.dujiahaoju.data; //独家好剧
						this.nixijuchang = data.nixijuchang.data; //逆袭剧场
						this.rexuejuchang = data.rexuejuchang.data; //热血剧场
						this.qingganjuchang = data.qingganjuchang.data; //情感剧场
					}
				});
			}
		},

		methods: {
			search() {
				if (!this.keyword) {
					vk.toast('搜索词不能为空')
					return;
				}
				uni.navigateTo({
					url: "/pages/index/search?keyword=" + this.keyword
				})
			},
			userlogin() {
				//检查登录情况，没注册自动用openid注册，注册过的直接登录
				vk.userCenter.loginByWeixin({
					loading: false,
					data: {
						appid: vk.vuex.get('$app.appid'),
						appname: vk.vuex.get('$app.appname'),
						appsecret: "",
						middleman_id: uni.getStorageSync('middleman_id') || 0, //机构/中间人ID
						invite_code: uni.getStorageSync('invite_code') || 0,
						tfid: uni.getStorageSync('tfid') || 0, //投放链接的_id
						req_id: uni.getStorageSync('req_id') || 0, //巨量传进来的req_id
						advertiser_id: uni.getStorageSync('advertiser_id') || 0, //巨量传进来的advertiser_id
						type: "",
						clue_token: uni.getStorageSync('clue_token') || 0, //巨量传进来的clue_token
						clickid: uni.getStorageSync('clickid') || "",
						tg_pt: uni.getStorageSync('tg_pt') || "",
					},
					success: (data) => {
						this.load_recharge(); //加载充值方案并保存到全局
						this.check_invite_code(data.userInfo);
						this.kefuurl = vk.vuex.get('$app.appinfo.workwxurl');
						// 登陆成功后才能执行此云函数
						this.loadUserData()
					}
				});
			},
			load_recharge() {
				vk.callFunction({
					url: 'client/pay/kh/get_rechargelist',
					title: '请求中...',
					data: {
						appid: vk.vuex.get('$app.appid')
					},
					success: (data) => {
						vk.vuex.set('$app.rechargelist', data.recharge)
					}
				});
			},
			check_invite_code(userInfo) {
				//检查是否开启静态化邀请码。即用户注册后邀请码始终不变。默认开启
				//特别注意：当参数类型为布尔值时，不可使用缺省值。否则布尔值为false时会自动使用缺省值
				let staticInvite_code = vk.vuex.get('$app.appinfo.staticInvite_code');
				if (staticInvite_code) {
					//如果开启静态化邀请码动态化，直接return;
					return;
				}
				//检查最新的invite_code和tfid,如果有变化就更新用户信息。0则直接return
				let local_invite_code = uni.getStorageSync('invite_code') || 0;
				let local_tfid = uni.getStorageSync('tfid') || 0;
				if (!local_invite_code || !local_tfid) {
					return;
				}
				if (userInfo.invite_code != local_invite_code ||
					userInfo.tfid != local_tfid) {
					vk.callFunction({
						url: 'client/user/kh/update_userinfo',
						title: '请求中...',
						data: {
							invite_code: local_invite_code,
							tfid: local_tfid
						},
						success: (data) => {
							this.userlogin()
						}
					});
				}
			},
			async loadAppData() {
				vk.callFunction({
					url: 'client/pages/pub/index_appdata',
					data: {
						appid: vk.vuex.get('$app.appid')
					},
					success: (res) => {
						console.log("vkres:", res);
						this.swiperList = res.swiperList;
						this.auiPoster.pic = res.indexpic;
						this.index_activity = res.active; //首页弹窗活动(每次进入都弹)
						vk.vuex.set('$app.index_activity', res.active);
						//active开关值为true，则直接弹窗
						if (res.active.status) {
							this.$refs.poster2.show();
						}
						this.xrsc = res.xrsc; //新人首充配置信息
						uni.setStorageSync("dataList", res.dataList);
						vk.vuex.set('$app.ucenter_icons', res.ucenter_icons)
						//当找到对应数据时，替换掉默认数据
						if (res.index_icons.length > 0) {
							this.iconList = []
							this.iconList = res.index_icons
						}
						vk.hideLoading();
					}
				});
			},
			loadUserData() {
				vk.callFunction({
					url: 'client/pages/kh/index_userdata',
					data: {
						todatStart: vk.vuex.get('$app.time.todayStart'),
					},
					success: (res) => {
						// console.log("vkres:", res);
						this.todaySign = res.todaySign;
						this.last_view = res.last_view;
						this.check_uservip(res.userInfo);
					}
				});
			},
			async check_uservip(userInfo) {
				if (userInfo.plus_type == 0) {
					console.log("用户非会员");
					return;
				}
				//判断用户的会员到期没有，到期的话就把plus_type改为0
				let plus_type = userInfo.plus_type
				let plus_expire_time = userInfo.plus_expire_time
				let nowtime = new Date().getTime()
				if (plus_expire_time < nowtime && plus_type == 1) {
					console.log("用户会员已过期，改为普通用户");
					let updateVip = await db.collection('uni-id-users').doc(userInfo._id).update({
						plus_type: 0
					})
				}
			},
			async switch_page(options) {
				if (options.path == "player") {
					const tv_info = await db.collection('a_tv').doc(options.tv_id).get()
					//参数带来的series需要传过去
					tv_info.result.data[0].series = options.series;
					this.toVideoDetail(tv_info.result.data[0])
				}

				if (options.path == "record") {
					//自动加载用户的最后一条历史浏览记录，并进入播放
					const last_view = await db.collection('a_history').where({
						user_id: vk.vuex.get('$user.userInfo._id')
					}).orderBy('_add_time', 'desc').limit(1).get()
					this.toVideoDetail(last_view.result.data[0])
				}

				if (options.path == "signin") {
					uni.navigateTo({
						url: "/pages_sub/signin/signin"
					})
				}
			},

			huanyihuan(index) {
				console.log("点击了第", index, "个换一换");
				vk.callFunction({
					url: 'client/video/pub/index_box',
					title: '请求中...',
					data: {
						appid: vk.vuex.get('$app.appid'),
						index_box: index
					},
					success: (data) => {
						if (index == 1) {
							this.haoyoulijian = data.haoyoulijian
						}
						if (index == 2) {
							this.dujiatuijian = data.dujiatuijian
						}
						if (index == 3) {
							this.baiwanbofang = data.baiwanbofang
						}
					}
				});
			},
			async getIndexVideo() {
				vk.callFunction({
					url: 'client/video/pub/index_box',
					title: '请求中...',
					data: {
						appid: vk.vuex.get('$app.appid'),
						page: 1
					},
					success: (data) => {
						this.haoyoulijian = data.haoyoulijian
						this.zuixinreju = data.zuixinreju.data
						this.rebobang = data.rebobang.data
						this.xinjubang = data.xinjubang.data
					}
				});
			},
			clickSwiper(e) {
				if (this.swiperList[e].url) {
					uni.navigateTo({
						url: this.swiperList[e].url
					})
					return;
				} else {
					this.toVideoDetail(this.swiperList[e], true)
				}
			},

			//查看更多
			getMoreTv(index_cate) {
				uni.navigateTo({
					url: "/pages_sub/moretv/moretv?index_cate=" + index_cate
				})
			},

			async toVideoDetail(item) {
				if (item.tv_id) {
					const tvinfo = await db.collection('a_tv').doc(item.tv_id).get()
					item = tvinfo.result.data[0]
				}
				vk.vuex.set('$app.currenttv', item)
				uni.navigateTo({
					url: '/pages/player/player?tv_id=' + item._id + "&series=" + item.series,
				})
			},

			async dingyue() {
				var that = this;
				uni.requestSubscribeMessage({
					tmplIds: vk.vuex.get('$app.msglist'),
					success(res) {
						console.log("订阅成功");
						uni.showToast({
							title: "操作成功"
						})
						that.showdingyue = false
						vk.callFunction({
							url: 'client/user/kh/dingyue',
							showLoading: false,
							data: {
								appid: vk.vuex.get('$app.appid'),
								appname: vk.vuex.get('$app.appname'),
								msglist: vk.vuex.get('$app.msglist'),
								platform: "weixin",
								tv_id: "no",
								tv_name: "no"
							},
						})
					},
					fail() {
						that.showdingyue = true
					}
				})
			},

			jump(url) {
				if (url == "kefu") {
					if (this.kefuurl) {
						wx.openCustomerServiceChat({
							extInfo: {
								url: vk.vuex.get('$app.appinfo.workwxurl'),
							},
							corpId: vk.vuex.get('$app.appinfo.workwxappid'),
							success(res) {
								调用客服成功
							}
						})
					} else {
						uni.navigateTo({
							url: "/pages_sub/signin/signin"
						})
					}
					return;
				}
				if (url == "/pages/Tabbar/watching/watching" || url == "/pages/Tabbar/tj/tj" || url ==
					"/pages/index/index") {
					uni.switchTab({
						url: url
					})
					return;
				}

				uni.navigateTo({
					url: url
				})
			},
			//点击新人首充弹窗优惠
			auiPosterCallback(e) {
				if (e.type == "main") {
					uni.navigateTo({
						url: "/pages_sub/recharge/discount?from=index"
					})
				}
			},

			//点击首页营销活动弹窗
			index_activity_Callback(e) {
				if (e.type == "main") {
					uni.navigateTo({
						url: this.index_activity.jump_url
					})
				}
			},

		}
	}
</script>

<style>
	/* //新剧提醒弹窗图片 */
	.fixed_pic1 {
		position: fixed;
		bottom: 120rpx;
		right: 10rpx;
		width: 180rpx;
		height: 180rpx;
	}

	.fixed_pic2 {
		position: fixed;
		bottom: 20rpx;
		right: 50rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 20rpx;
	}

	/* //后期添加的class */
	.classone {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-left: 32rpx;
	}

	.classtwo {
		font-size: 30rpx;
		font-weight: 600;
	}

	.classthree {
		color: #666666;
		font-size: 28rpx;
		margin-left: 14rpx;
	}

	.classfour {
		width: 220rpx;
		border-radius: 10rpx;
		height: 352rpx;
	}

	.classfive {
		display: flex;
		flex-wrap: wrap;
		margin-left: 15rpx;
	}

	.classsix {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.scroll_box {
		white-space: nowrap;
		margin: 20rpx 0;
	}

	.scroll_item {
		background-color: #fef6f3;
		padding: 20rpx;
		border-radius: 20rpx;
		width: 520rpx;
		display: inline-block;
		margin: 0 0rpx 0 20rpx;
		/* height: 450rpx; */
	}

	.scroll_tv_name {
		font-size: 28rpx;
		font-weight: 600;
	}

	.scroll_img {
		width: 120rpx;
		height: 152rpx;
		border-radius: 10rpx;
	}

	.scroll_sort_img {
		width: 30rpx;
		height: 40rpx;
		margin-right: 14rpx;
	}

	.recommend_box {
		background-color: #f5f5f5;
		border-radius: 10rpx;
		margin: 20rpx;
		padding: 20rpx;
	}

	.recommend_top {
		display: flex;
		justify-content: space-between;
	}

	.recommend_item {
		width: 200rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 20rpx 10rpx;
	}

	.tv_name {
		margin: 4rpx 6rpx;
		font-size: 28rpx;
		display: -webkit-box;
		overflow: hidden;
		white-space: normal !important;
		text-overflow: ellipsis;
		word-wrap: break-word;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.update_num {
		font-size: 24rpx;
		color: #888888;
		display: -webkit-box;
		overflow: hidden;
		white-space: normal !important;
		text-overflow: ellipsis;
		word-wrap: break-word;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.recommend_but {
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 14rpx 0;
		border-radius: 50rpx;
	}


	.continue-bg1 {
		position: fixed;
		bottom: 20rpx;
		left: 10rpx;
		background-color: #d7893e;
		padding: 0 0 13rpx 0;
		width: 140rpx;
		border-radius: 20rpx;
		border: 2rpx solid #7d5f40;
	}

	.continue-bg2 {
		background-color: #f2c351;
		padding: 10rpx 0rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.continue-border {
		border: 3rpx solid #7d5f40;
		width: 110rpx;
		height: 145rpx;
		border-radius: 15rpx;
	}

	.continue-pic {
		border-radius: 11rpx;
		width: 110rpx;
		height: 145rpx;
		z-index: 999;
	}

	.continue-text {
		position: absolute;
		color: #000000;
		background-color: #fddd94;
		font-size: 16rpx;
		width: 90rpx;
		text-align: center;
		margin-top: -45rpx;
		margin-left: 8rpx;
		z-index: 999;
		border: 2rpx solid #fff8ce;
		border-radius: 8rpx;
	}

	/* 导航图标 */
	.grid_flex {
		display: flex;
		justify-content: space-around;
		margin: 0 0 20rpx 0;
	}

	.grid_item_flex {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.grid_pic {
		width: 80rpx;
		height: 80rpx;
	}

	.grid_text {
		font-size: 30rpx;
		color: #6b6b6b;
		margin-top: 10rpx;
	}

	/* 导航图标结束 */
</style>